<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>3.Vue监测数组改变的原理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				Vue如何监测数组的改变？			
						通过包裹数组的变更方法实现，本质就是做了两件事：
								(1).调用原生对应的方法对数组进行更新。
								(2).重新解析模板，进而更新页面。
						备注：在Vue的世界里，修改数组中的某一项一定要用如下方法：
								push()、pop()、shift()、unshift()、splice()、sort()、reverse()
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>人员信息</h2>
			<ul>
				<li>中文姓名：{{name.zhName}}</li>
				<li>英文姓名：{{name.enName}}</li>
				<li>年龄：{{age}}</li>
				<li>性别：{{gender}}</li>
				<li>爱好：{{hobby}}</li>
			</ul>
			<button @click="age += 1">年龄+1</button>
			<button @click="changeFirstHobby">修改第1个爱好</button>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			let vm = new Vue({
				el:'#demo',
				data:{
					name:{
						zhName:'张三',
						enName:'zhang-san'
					},
					age:18,
					gender:'男',
					hobby:['抽烟','喝酒','打代码',{x:666}]
				},
				methods:{
					changeFirstHobby(){
						// this.hobby[0] = '开车' //该行代码是直接对数组中的某一项进行修改，Vue监测不到（“Vue致盲了”）
						this.hobby.splice(0,1,'开车') //这种修改奏效
						// this.hobby = ['学习','吃饭','睡觉'] //这种修改奏效
						// this.hobby[3].x = 888 //奏效
					}
				}
			})
			
		</script>
	</body>
</html>